---
title: Number Ticker
date: 2023-11-18
description: Animate numbers to count up or down to a target number
author: dillionverma
published: true
video: https://cdn.magicui.design/number-ticker.mp4
---

<ComponentPreview name="number-ticker-demo" />

<Steps>

### Installation

Copy and paste the following code into your project.

```text
components/magicui/number-ticker.tsx
```

<ComponentSource name="number-ticker" />

</Steps>

## Props

| Prop      | Type       | Description               | Default |
| --------- | ---------- | ------------------------- | ------- |
| value     | int        | The value to count to     | 0       |
| direction | up \| down | The direction to count in | up      |
